<template>
  <el-dropdown
    trigger="hover"
    @command="hanldeUserCenter"
    :show-timeout="0"
    class="mx15 cP"
  >
    <span class="el-dropdown-link">
      <div class="aic">
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <div
          :style="{
            color: $store.state.navIsTo
              ? 'var(--menuColorFont)'
              : 'var(--navColorFont)',
          }"
          class="llt-default-font-color mx15 userBox"
        >
          {{ getUserInfo.nickName ? getUserInfo.nickName : "10001号" }}
        </div>
      </div>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="1" icon="el-icon-s-custom"
          >个人中心</el-dropdown-item
        >
        <el-dropdown-item command="2" icon="el-icon-s-release" divided
          >退出系统</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { store } from "/@ts/store";
const router = useRouter();
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const activeIndex = ref(0);
const state = reactive({
  userInfo: {},
});
onMounted(() => {});
const getUserInfo = computed(() => {
  let data: any = store.state;
  return data.loginModule.userInfo;
});
//用户头像菜单
const hanldeUserCenter = (e: string) => {
  switch (e) {
    case "1":
      //个人中心
      router.push("/adminEdit");
      break;

    default:
      //退出

      store.dispatch("loginModule/LogOut").then(() => {
        router.push("/login");
      });
      break;
  }
};
const handleSelect = () => {};
defineProps({
  msg: {
    type: String,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.userBox {
  white-space: nowrap;
}
</style>
